<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="{{asset('js/vue.js')}}"></script>
    {{--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>--}}
    <link rel="stylesheet" type="text/css" href="{{asset('css/app.css')}}">
    <link rel="stylesheet" href="{{asset('css/novel.css')}}">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <b style="font-size: large;color: #337ab7;">Welcome Here And Chat Secretly.</b>
                    </div>
                    <div class="novel_list">
                        <table class="table table-striped" style="font-size: large;">
                            @foreach($novel_list as $novel)
                                <tr>
                                    <td>
                                        <a href="{{url('chapter',['novel_id'=>$novel->id])}}">{{$novel->title}}</a>
                                    </td>
                                </tr>
                            @endforeach
                        </table>
                    </div>
                    <div class="return_last" style="position: fixed;right: 10px;;">
                        @if($cookie['chapter_id']&&$cookie['novel_id'])
                            <h4>
                                <a href="{{url('content',['chapter_id'=>$cookie['chapter_id'],'novel_id'=>$cookie['novel_id']])}}">
                                    <b>上次阅读</b></a>
                            </h4>

                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default chat-list" style="bottom: 5px">
            <div class="panel-body">
                <ul class="list-group ">
                    <li class="list-group-item" v-for="message in messages" :class="{isRight:message.id != null}">
                        @{{message.content}}
                    </li>
                </ul>

                    <div class="form-group">
                        <input type="text"
                               v-model="newMessage.content"
                               class="form-control"
                               id="string-to-me" @keydown.enter=" keyup(newMessage.content,1)"
                               placeholder="For Freedom" >
                    </div>
                    <button type="button" class="btn btn-success" @click="sendMessage(newMessage.content,1)"
                   >Go</button>

            </div>

        </div>
    </div>
</body>
<script>
    new Vue({
        el:'.chat-list',
        data:{
            test:'hello',
            messages:[
            ],
            newMessage:{id:null,content:''},
            ws:"",
        },
        methods:{
            addMessage(newMessage){
                this.messages.push(newMessage)
                this.newMessage = {id:null,content:''}

            },
            sendMessage(string,id){
                this.addMessage({id:id,content:string});
                this.ws.send(string);
            },
            keyup(string,id){
                this.sendMessage(string,id);
            }
        },
        mounted:function(){
            let _this=this;
            _this.ws = new WebSocket('ws://justtest.cn:80/');
            var ws =_this.ws;
            ws.onopen = function(evt) {
                console.log('Connection open ...');
            };
            ws.onmessage = function(evt) {
                _this.newMessage={id:null,content:evt.data}
                _this.addMessage(_this.newMessage);
                console.log('Received Message: ' + evt.data);
                console.log('Connection continue...');
//                  ws.close();
            };
            ws.onclose = function(evt) {
                _this.addMessage({id:null,content:'你已经下线'});
                console.log('Connection closed.');
            };
        }

    });

</script>
</html>
<style>
    .isRight{
        text-align: right;
    }
</style>